<template>
  <el-dialog
      v-model="dialogVisible"
      title="自动部署服务器管理"
      width="500"
  >
    <div class="page-header-button">
      <el-button type="primary" @click="showAdd">
        <el-icon><CirclePlus /></el-icon>
        &nbsp;添加
      </el-button>
    </div>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column prop="address" label="服务器" width="100" :show-overflow-tooltip="true" />
      <el-table-column prop="expire_date" label="更新文件" :show-overflow-tooltip="true">
        <template #default="scope">
          <div v-for="file in scope.row.update_files_list" :key="`domain-service-table-file-list-${scope.row.id}-${file.use_type}`">
            容器类型：{{ getSSLUseTypeName(file.use_type) }}
            <template v-for="file_path in file.file_type_list" :key="`domain-service-table-file-list-path-${scope.row.id}-${file_path}`">
              <div v-if="file[`file_${file_path}`]" style="width: 100%; margin-top: 8px; display: flex">
                <div style="text-align: right; width: 45%">{{file_path}}文件：</div>
                <div style="text-align: left; width: 55%">{{ file[`file_${file_path}`] }}</div>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="after_command" label="更新后置命令" :show-overflow-tooltip="true" />
      <el-table-column label="操作" width="50">
        <template #default="scope">
          <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <more-filled />
                </el-icon>
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="del(scope.row)"><el-icon><Delete /></el-icon> 删除</el-dropdown-item>
                <el-dropdown-item @click="showModify(scope.row)"><el-icon><EditPen /></el-icon> 修改</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <domain-service-form ref="refDomainServiceForm" @refresh="getData(true)" />
  </el-dialog>
</template>

<script>
import {Delete, MoreFilled, EditPen, CirclePlus} from "@element-plus/icons-vue"
import DomainServiceForm from "@/components/domain/DomainServiceForm.vue"
import StoreSSLServer from "@/store/StoreSSLServer"
import StoreServer from "@/store/StoreServer"
import EnumSSLUseType from "@/config/EnumSSLUseType"

export default {
  name: 'DomainService',
  components: {
    CirclePlus, Delete, MoreFilled, EditPen,
    DomainServiceForm
  },
  data () {
    return {
      dialogVisible: false,
      sslInfo: {},
      tableData: [],
      page: {
        size: 20,
        page: 1,
        total: 1
      }
    }
  },
  methods: {
    /**
     * 显示窗口.
     */
    show (sslInfo) {
      this.sslInfo = Object.assign({}, sslInfo)
      this.getData(true)
      this.dialogVisible = true
    },
    /**
     * 获取数据.
     * @param resetPage {boolean}
     */
    getData(resetPage) {
      if (resetPage) {
        this.page.page = 1
      }

      StoreSSLServer.getPagedData(this.page.page, this.page.size, {
        cloud_type: this.sslInfo.cloud_type,
        ssl_id: this.sslInfo.id
      }, (data) => {
        const serverIds = []
        for (let i = 0; i < data.data.length; i++) {
          const item = data.data[i]
          serverIds.push(item.server_id)
        }
        StoreServer.getAll({id: {
            type: 'in',
            value: serverIds
          }}, (serverList) => {
          const serverMap = {}
          for (let i = 0; i < serverList.length; i++) {
            const item = serverList[i]
            serverMap[item.id] = item.address
          }

          data.data.forEach((item) => {
            item.address = serverMap[item.server_id]
            item.update_files_list = JSON.parse(item.update_files)
          })

          console.log('server list: ', data.data)

          this.tableData = data.data
          this.page.total = data.total
        })

      })
    },

    /**
     * 删除关联
     * @param row
     */
    del(row) {
      this.$confirm('此操作将删除关联, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
    /**
     * 修改关联.
     * @param row {Object}
     */
    showModify(row) {
      this.$refs.refDomainServiceForm.show(true, {
        cloud_type: this.sslInfo.cloud_type,
        ssl_id: this.sslInfo.id,
        id: row.id,
        server_id: row.server_id,
        update_files_list: row.update_files_list,
        after_command: row.after_command
      })
    },
    /**
     * 添加关联.
     */
    showAdd() {
      this.$refs.refDomainServiceForm.show(false, {
        cloud_type: this.sslInfo.cloud_type,
        ssl_id: this.sslInfo.id
      })
    },
    /**
     * 获取容器类型名称
     * @param type {string}
     * @returns {string}
     */
    getSSLUseTypeName(type) {
      return EnumSSLUseType.getByValue(type).label
    }
  },
  mounted() {
    StoreSSLServer.init(this)
  }
}
</script>

<style scoped>

</style>